if条件渲染

通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

• v-if

• v-else-if

• v-else

• v-show

v-if

    
    
    
    



  {{ message }} 

   鼠标悬停几秒钟查看此处动态绑定的提示信息！ 

   戳我有惊喜 
  
   
现在你看到我了

效果

v-if和v-else

文档

   个人中心
   登录

v-else要紧跟 v-if后边

v-if,v-else-if和v-else

文档

v-show

    
    
    
    



   
现在你看到我了
   
现在你看到我了

效果

v-show用法和v-if大致一样，但是它不支持v-else,它和v-if的区别是，它制作元素样式的显示和隐藏，元素一直是存在的

注意在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突